<template>
    <div style="background-color: #66ccff;">
        <h1>我是父组件，这个底色都是我，其他颜色都是我的子组件</h1>
        <h2>1.注册局部组件</h2>
        <ButtonCounter></ButtonCounter>
        <h2>2. 使用kebab-case注册组件</h2>
        <button-counter></button-counter>
        <h3>同一个组件被多次调用时，各自的数据都是独立的</h3>
        <h1>3. 注册全局组件</h1>
        <h3>全局组件在main.js中注册,我们在这个页面只要进行调用即可</h3>
        <DoubleCounter></DoubleCounter>
        <h2>4.组件可以重复调用</h2>
        <HelloView name="张三"></HelloView>
        <HelloView name="李四"></HelloView>
        <HelloView name="老八"></HelloView>
        <h2>2.动态组件</h2>
        <h3>使用component实现动态组件，它允许开发人员在不同的场景下灵活的渲染不同的组件
            ，具体应用场景，查阅项目四任务二</h3>
            <input type="radio" v-model='denglu' value="DengLu1">微信登录
            <input type="radio" v-model='denglu' value="DengLu2">手机登录
            <component :is="denglu"></component>
        <h2>6.带缓存的导航组件</h2>
        <button @click="currentTab='TDao1'">冰淇淋</button>
        <button @click="currentTab='TDao2'">蛋糕</button>
        <button @click="currentTab='TDao3'">糖果</button>
        <!-- keep-alive,可以缓存组件 -->
         <keep-alive>
            <component :is="currentTab"></component>
         </keep-alive>
         <h2>7.异步组件：可以保证系统的稳定性和响应</h2>
         <h3>suspense内置组件，来协调处理组件树中的嵌套的异步依赖，他有两个插槽
            一个是default插槽，一个是fallback插槽。default中的内容是当插槽中的组件可以显示就显示
            不能显示就显示fallback中的内容
         </h3>
         <Suspense>
            <template v-slot:default>
                <div>
                     <DelayConn/>
              </div>
            </template>
            <template v-slot:fallback>
                <div>
                    <h2>Loading......</h2>
                </div>
            </template>
         </Suspense>
         <h2>8.peops实现父组件与子组件通信，通过&emit实现子组件与父组件通信</h2>
         <SomOne toSon="你有没有好好孝敬你爹我?" @score="dadHandle"></SomOne>
         <h3>注意：不论数据传递的是何种形式，传递的都是字符串，可以使用v-bind来动态绑定属性，
            实现通过变量来传递数据
         </h3>
         <h2>9.props对象用法</h2>
         <h3>可以为组件的props指定验证要求，例如指定数据类型，如果传递的数据类型不符合要求会发出警告</h3>
         <SomTwo :name1="name"  :age="age"  :gender="gender"  :hobby="hobby"></SomTwo>
         <h2>10.props数据是单向的</h2>
         <h3>父组件的数据有可能也会传递给其他子组件，如果被其中一个子组件修改了数据，这会影响其他子组件</h3>
         <h3>如果子组件想要在自己作用域里面修改父组件传递过来的数据，就要在子组件data中另外定义一个变量，引用父组件传递过来的props值</h3>
         给你一比斗<SomOne  :wid="wid"></SomOne>
         <h2>11.通过￥ref实现父组件与子组件的通信</h2>
         <h3>$ref是vue提供的一个内置的对象，拥有已使用ref属性并成功注册的所有元素与组件
            通过$ref可以直接访问DOM元素或者组件实例，是的父组件进行通信
         </h3>
         <button @click="sendMessage">还有一句话</button>
         <SomOne ref="childRef"/>
         <h2>12.provide和inject实现组件通信</h2>
         <h3>非父子组件通信包括兄弟组件和跨多级组件通信。provide和inject是两个用于实现组件通信的选项</h3>
        <h3>provide选项允许父组件向其所有子组件注入一些数据与方法，这个和注入的数据与方法对于父组件来说是全局的
            可以在子组件中通过inject选项来获取与使用
        </h3>
        <SomThree></SomThree>
         <br>
    </div>
</template>

<script>
import ButtonCounter from '@/components/ButtonCounter.vue';
import TDao1 from '@/components/DaoHang/TDao1.vue';
import TDao2 from '@/components/DaoHang/TDao2.vue';
import TDao3 from '@/components/DaoHang/TDao3.vue';
import DelayConn from '@/components/DelayConn.vue';
import DengLu1 from '@/components/DengLu1.vue';
import DengLu2 from '@/components/DengLu2.vue';
import GrandSom from '@/components/GrandSom.vue';
import HelloView from '@/components/HelloView.vue';
import SomOne from '@/components/SomOne.vue';
import SomThree from '@/components/SomThree.vue';
import SomTwo from '@/components/SomTwo.vue';


export default {
    data() {
        return {
            name:'朋友',
            denglu:'',
            currentTab:'TDao1',
            name1:'zhangsan',
            age:[18],
            // gender:'男',
            // hobby:[],
            wid:200,
        }
    },
    components:{
        ButtonCounter,
        HelloView,
        DengLu1,
        DengLu2,
        TDao1,
        TDao2,
        TDao3,
        DelayConn,
        SomOne,
        SomTwo,
        SomThree,
        GrandSom
    },
    methods:{
        dadHandle(val){
            alert("孝敬你爹考了"+val+"还行")
        },
        sendMessage(){
            this.$refs.childRef.receiveMessage("好儿子")
        }
    },
    provide:{
        message:'这是fatherOne的数据'
    }
}
</script>